import React, { PureComponent } from "react";

let timer;

// 声明周期的执行顺序
// 父 render -> 子 render -> 子 componentDidMount -> 父 componentDidMount

// 默认情况下，只要父组件重新，子组件就会跟着重新渲染
// 除非添加shouldComponentUpdate，或者使用PureComponent

// 如果分了组件，又添加了PureComponent，其他的组件发生更新的时候，这个组件不会发生重新渲染，比起不分组件,提高了性能。
class Child extends PureComponent {
  state = {};
  render() {
    console.log("child render");
    return <div>child子组件 - {this.props.name}</div>;
  }
  componentDidMount() {
    console.log("child componentDidMount");
    timer = setInterval(() => {
      console.log(123);
    }, 1000);
  }

  //! props的更新阶段
  // 已经被弃用了，父组件被重新渲染的时候就会执行
  // 做不了什么事情
  // 16.3版本之后新增了更加好用的生命周期
  UNSAFE_componentWillReceiveProps() {
    console.log("componentWillReceiveProps");
  }

  // shouldComponentUpdate(nextProps) {
  //   console.log("child shouldComponentUpdate");
  //   return nextProps.name !== this.props.name;
  // }

  UNSAFE_componentWillUpdate() {}
  componentDidUpdate() {}

  //! 卸载阶段
  // 关闭定时器，关闭长连接，js的事件监听，map或echarts等第三方插件的实例
  componentWillUnmount() {
    console.log("render componentWillUnmount");
    clearInterval(timer);
  }
}

export default Child;
